<template>
	<conf-module-container :show-page-tools="true">
		<template #Slot-Conf-Module-Header>
			<div class="module-header">
				<p class="boxes-title font-20-bold">处罚管理</p>

				<div class="page-switch-group">
					<p
						v-if="g6Permission.showBtn('punish-report')"
						class="page-switch-group-item"
						:style="c_ActivePageStyle(0)"
						@click="changeActivePage(0)"
					>
						处罚报表
					</p>

					<p
						v-if="g6Permission.showBtn('joint-liability-report')"
						class="page-switch-group-item"
						:style="c_ActivePageStyle(1)"
						@click="changeActivePage(1)"
					>
						连带责任报表
					</p>
				</div>

				<div class="module-header-right">
					<a-button v-if="g6Permission.showBtn('punish-setting')" type="primary" @click="toSeeting">处罚设置</a-button>
				</div>
			</div>
		</template>

		<template #Slot-Conf-Module-Tools-Left>
			<div class="search-group">
				<global-input-search
					v-model:value="tableAttr.searchObj.name"
					:placeholder="c_InputSearchPlaceholder"
					class="global-input"
					:width="215"
					@search="() => setTableData(true)"
				></global-input-search>

				<a-select
					v-model:value="tableAttr.searchObj.zeloAreaId"
					:options="regionOpts"
					style="width: 215px"
					@change="() => setTableData(true)"
				></a-select>

				<a-range-picker
					format="YYYY-MM-DD HH:mm"
					class="range-picker"
					style="width: 218px"
					value-format="YYYY-MM-DD HH:mm"
					:value="[createBeginVal, createEndVal]"
					show-time
					:class="[createBeginVal && createBeginVal && 'active']"
					:placeholder="['开始时间', '结束时间']"
					input-read-only
					@calendar-change="changeRangePicker"
				>
					<template #suffixIcon> <clock-circle-outlined></clock-circle-outlined></template
				></a-range-picker>
			</div>
		</template>

		<template #Slot-Conf-Module-Tools-Right>
			<a-button
				v-if="actviePage === 0 && g6Permission.showBtn('export-data')"
				:disabled="exporting_1"
				type="primary"
				style="margin-right: -8px"
				@click="exportTableData"
			>
				<loading-outlined v-if="exporting_1"></loading-outlined>
				<upload-outlined v-else style="color: #b0b5c0"></upload-outlined>
				<span>导出Excel</span>
			</a-button>

			<a-button
				v-if="actviePage === 1 && g6Permission.showBtn('export-data')"
				:disabled="exporting_2"
				type="primary"
				style="margin-right: -8px"
				@click="exportTableData"
			>
				<loading-outlined v-if="exporting_2"></loading-outlined>
				<upload-outlined v-else style="color: #b0b5c0"></upload-outlined>
				<span>导出Excel</span>
			</a-button>
		</template>

		<template #Slot-Conf-Module-Content>
			<div class="_table">
				<div>
					<global-table
						v-if="actviePage === 0"
						:data-source="tableAttr.data"
						:selected-row-keys="tableAttr.selectedKeys"
						:loading="tableAttr.loading"
						:columns="columns_1"
						:use-select="false"
					>
						<template #currentDouble="{ record }">{{ record.currentDouble === 0 ? '否' : '是' }} </template>
					</global-table>

					<global-table
						v-if="actviePage === 1"
						:data-source="tableAttr.data"
						:selected-row-keys="tableAttr.selectedKeys"
						:loading="tableAttr.loading"
						:columns="columns_2"
						:use-select="false"
					>
						<template #operation="{ record }"> </template>
					</global-table>
				</div>
				<div>
					<global-pagination
						:current="tableAttr.current"
						:page-size="tableAttr.pageSize"
						:total="tableAttr.total"
						@change="setTablePagination"
					></global-pagination>
				</div>
			</div>
		</template>
	</conf-module-container>
</template>

<script setup lang="ts">
import { g6Permission } from 'glasssix-utils-ts';
import { usePunishTableHooks } from '../../punish.hooks';
import httpServe from '@/global-services';
import { ConfModuleContainer } from '../../components';

const router = useRouter();
const { tableAttr, setApiFn, setTableData, setTablePagination } = usePunishTableHooks();
/** 页面切换 */
const actviePage = ref<0 | 1>(0); // 0：个人处罚数据，1：连带责任数据
const c_InputSearchPlaceholder = computed(() => {
	// return actviePage.value === 0 ? '姓名/班组名称' : '姓名';
	return '姓名/班组名称';
});
const c_ActivePageStyle = computed(() => {
	return function (type: 0 | 1) {
		return {
			backgroundColor: type === actviePage.value ? 'rgba(240, 246, 252, 0.10)' : 'transparent',
			color: type === actviePage.value ? '#fff' : '#B0B5C0'
		};
	};
});
const columns_1: any[] = [
	{ dataIndex: 'zeloViolatorName', title: '违规人员', width: 150, ellipsis: true },
	{ dataIndex: 'zeloAreaFactory', title: '所属区域', width: 150, ellipsis: true },
	{ dataIndex: 'zeloAreaName', title: '所属班组', width: 150, ellipsis: true },
	{ dataIndex: 'leadersStr', title: '管理责任人', width: 220, ellipsis: true, sorter: false },
	{ dataIndex: 'aiSrvName', title: '违规算法', width: 180, ellipsis: true },
	{ dataIndex: 'scope', title: '违规记分', width: 150, ellipsis: true },
	{ dataIndex: 'currentDouble', title: '是否翻倍处罚', width: 150, ellipsis: true, custom: true }, // 当前记录是否翻倍处罚 0：否 1：是
	{ dataIndex: 'createTime', title: '产生时间', ellipsis: true },
	{ dataIndex: 'forfeit', title: '罚款/元', ellipsis: true }
];
const columns_2: any[] = [
	{ dataIndex: 'zeloViolatorName', title: '管理责任人', width: 150, ellipsis: true },
	{ dataIndex: 'zeloAreaFactory', title: '管辖区域', width: 150, ellipsis: true },
	{ dataIndex: 'zeloAreaName', title: '所属班组', width: 150, ellipsis: true },
	{ dataIndex: 'leadersStr', title: '违章人员', width: 250, ellipsis: true },
	// { dataIndex: 'alarmCount', title: '违章次数', width: 150, ellipsis: true, sorter: false },
	{ dataIndex: 'aiSrvName', title: '违章描述', width: 300, ellipsis: true },
	{ dataIndex: 'createTime', title: '产生时间', ellipsis: true },
	{ dataIndex: 'forfeit', title: '罚款/元', ellipsis: true }
];

const changeActivePage = (type: 0 | 1) => {
	if (actviePage.value === type) {
		return;
	}
	actviePage.value = type;
	tableAttr.current = 1;
	tableAttr.total = 0;
	tableAttr.searchObj = { zeloAreaId: null };
	const pageUrl = type === 0 ? '/base/punish/page' : '/base/punish/page/relate';
	setApiFn((params: Record<string, any>) => {
		const obj: any = {};
		for (const key in params) {
			if (!!params[key]) {
				obj[key] = params[key];
			}
		}
		return httpServe.getTablePostApi(pageUrl)(obj);
	});
	setTableData(true);
};

const regionOpts = ref<any[]>([{ label: '全部区域', value: null }]);
const getAllRegions = async () => {
	const res: any = await httpServe.getHttp('/base/zelo/list/2')(); // 1 顶级 2车间 3班组
	if (res.code === 0) {
		res.data.forEach((i: any) => regionOpts.value.push({ label: i.name, value: i.id }));
	}
};

// 时间过滤
const createBeginVal = ref<any>();
const createEndVal = ref<any>();
const changeRangePicker = (dates: any, date: string[]): void => {
	if (dates === null) {
		tableAttr.searchObj.startTime = undefined;
		tableAttr.searchObj.endTime = undefined;
		createBeginVal.value = undefined;
		createEndVal.value = undefined;

		tableAttr.current = 1;
		setTableData(true);
	} else {
		if (dates.length === 2 && !!dates[0] && !!dates[1]) {
			tableAttr.searchObj.startTime = `${date[0]}:00`;
			createBeginVal.value = `${date[0]}`;
			tableAttr.searchObj.endTime = `${date[1]}:59`;
			createEndVal.value = `${date[1]}`;

			tableAttr.current = 1;
			setTableData(true);
		}
	}
};

const exporting_1 = ref(false);
const exporting_2 = ref(false);
/** 导出数据 */
const exportTableData = async () => {
	let params: any = {};
	if (tableAttr.searchObj.startTime && tableAttr.searchObj.endTime) {
		params.startTime = tableAttr.searchObj.startTime;
		params.endTime = tableAttr.searchObj.endTime;
	}
	if (tableAttr.searchObj.name) {
		params.name = tableAttr.searchObj.name;
	}
	if (tableAttr.searchObj.zeloAreaId) {
		params.zeloAreaId = tableAttr.searchObj.zeloAreaId;
	}
	let res: any = '';
	if (actviePage.value === 0) {
		exporting_1.value = true;
		res = await httpServe.postHttp('/base/punish/page/export')(params, { responseType: 'blob' });
		console.log('导出数据-个人', res);
	} else {
		exporting_2.value = true;
		res = await httpServe.postHttp('/base/punish/page/relate/export')(params, { responseType: 'blob' });
		console.log('导出数据-连带', res);
	}
	exporting_1.value = false;
	exporting_2.value = false;
	if (res.code === 0) {
		const href = window.URL.createObjectURL(new Blob([res.data]));
		const downloadElement = document.createElement('a');
		downloadElement.style.display = 'none';
		downloadElement.href = href;
		// downloadElement.download = `处罚表单—${dayjs().format('YYYY-MM-DD')}_${dayjs().format('hh:mm:ss')}.xlsx`;
		downloadElement.download = res.title;
		document.body.appendChild(downloadElement);
		downloadElement.click();
		document.body.removeChild(downloadElement);
		window.URL.revokeObjectURL(href);
	}
};

/** 进入：处罚设置 */
const toSeeting = () => router.push('/config-manage/punish-manage/punish-setting');

onMounted(() => {
	setApiFn((params: Record<string, any>) => httpServe.getTablePostApi('/base/punish/page')(params));
	tableAttr.searchObj.zeloAreaId = null;
	setTableData(true);
	getAllRegions();
});
</script>

<style lang="less" scoped>
.module-header {
	display: flex;
	justify-content: space-between;
	width: 100%;

	.boxes-title {
		color: @text01;
	}
	// 右侧页面显示方式切换
	.display-change-box {
		display: flex;

		.list-check {
			margin-right: 8px;
		}

		.change-item {
			display: flex;
			width: 34px;
			height: 34px;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			cursor: pointer;
		}

		.current {
			border-radius: 6px;
			background: @mask04;

			/* 淡阴影/淡XS */
			box-shadow: 0 1px 4px 0 rgba(2, 36, 59, 0.06);
		}
	}

	.module-header-right {
		margin-left: auto;
		padding-left: 24px;
	}
}

.page-switch-group {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-left: 32px;

	.page-switch-group-item {
		display: flex;
		height: 30px;
		border-radius: 6px;
		padding: 4px 12px;
		font-size: 14px;
		font-weight: 700;
		font-style: normal;
		line-height: 22px;
		justify-content: center;
		align-items: center;

		&:hover {
			opacity: 0.88;
			cursor: pointer;
		}
	}
}

.search-group {
	display: flex;
	align-items: center;
	gap: 8px;
}

._table {
	display: flex;
	height: calc(100vh - 76px - 44px - 160px);
	padding: 20px 0 0;
	flex-direction: column;
	justify-content: space-between;
}

._button {
	display: flex;
	height: 36px;
	margin-left: 32px;
	border: 1px solid @borderColor02;
	border-radius: 6px;
	padding: 8px 16px;
	line-height: 36px;
	color: @text01;
	background: none;
	box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.04);
	justify-content: center;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}
</style>
